<template>
    <div class="error404" :style="{background:`url(${imageUrl}) no-repeat`}">
      <div style="flex: 1;"></div>
      <div class="content">
        <p class="code">{{ code }}</p>
        <p class="message">{{ message }}</p>
        <el-button type="primary" @click="goUrl">{{ goTitle }}</el-button>
      </div>
    </div>
  </template>
  
  <script setup lang="ts">
  import {useRouter} from 'vue-router'
  const props = defineProps({
    imageUrl:{
      type:String,
      default:'src/assets/images/error_images/404.png'
    },
    code:{
        type:String,
        default:'404'
    },
    message:{
        type:String,
        default:'抱歉，你无权访问该页面'
    },
    goTitle:{
        type:String,
        default:'返回首页'
    },
    //跳转的路由路径
    url:{
        type:String,
        defalut:'./home'
    }
 })
  const $router=useRouter()
  
  const goUrl=()=>{  
    $router.push(props.url as any)
  }
  </script>
  
  <script lang="ts">
  export default {
    name: '404',
  }
  
  
  </script>
  
  <style scoped lang="scss">
  .error404{
    width: 1010px;
    height:600px; 
    background-size: 100% 100%;
    display: flex;
    .content{
      flex: 1;
      line-height: 65px;
      .code{
        font-size: 50px;
        font-weight: 600;
      }
      .message{
        font-size: 13px;
      }
    }
  
  }
  </style>
  